<template>
    <div>
        <header style="position: relative">
            <div class="sub-title">
                <div class="sub-text">各区县农户比率</div>
                <p class="sub-text-en">Ratio of farmers in districts and counties</p>
            </div>
        </header>
        <div>
            <v-chart style="width: 100%;height: 210px" :options="option"></v-chart>
        </div>
    </div>
</template>
<script>
    export default {
        name:'farmRatio',
        components: {
        },
        props: {
            current:{
                type: String,
                default: ''
            }
        },
        data () {
            return {
                option:{
                    grid:{
                        left:30,
                        bottom:40,
                        right:20
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter:'{b}:<br />成交量：{c}'
                    },
                    xAxis: {
                        data: ['万山区', '印江县', '德江县', '松桃县','江口县', '沿河县', '玉屏县', '石阡县','碧江区'],
                        splitLine: {show: false},
                        type:'category',
                        axisLabel:{
                            color:'#E4E6F0',
                            interval:0
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#6D7498'
                            }
                        },
                        axisTick: {
//                            show:false
                        },
                    },
                    yAxis: {

                        axisTick: {
//                            show:false
                        },
                        axisLabel: {
                            color:'#6D7498'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#6D7498'
                            }
                        },
                        type:'value',
                        splitLine: {show: false},
                        name:'单位/万斤',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        position:'top',
                    },

                    animationDurationUpdate: 1200,
                    series: [ {
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#00FFFF'
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,0,251,0.7)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(0,0,251,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: [45, 60, 13, 25,45, 60, 13, 25,45]
                    }]
                }
            }
        },
        computed: {
        },
        watch: {
            current: function (newQuestion, oldQuestion) {
                if(newQuestion===oldQuestion) return false;
                switch (newQuestion){
                    case 'za':
                        console.log('正安县');
                        break;
                    case 'rhs':
                        console.log('仁怀市');
                        break;
                    case 'zunyi':
                        console.log('遵义市');
                        break;
                }
//                this.axios.get(api).then((response) => {
//                    console.log(response.data)
//                })
//                console.log(newQuestion,oldQuestion)
            }
        },
        methods: {
            init(){
                switch (this.current){
                    case 'za':
                        console.log('正安县数据');
                        break;
                    case 'rhs':
                        console.log('仁怀市数据');
                        break;
                    case 'zunyi':
                        console.log('遵义市数据');
                        break;
                }
            }
        },
        mounted () {
        },
        created(){
            this.init()
        }
    }

</script>
<style>
    /**
     * The default size is 600px×400px, for responsive charts
     * you may need to set percentage values as follows (also
     * don't forget to provide a size for the container).
     */
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>